/**
 *  学习目标：Todos 案例
 */
import React, { Component } from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {
  state = {
    list: [
      {
        task: '学习React',
        isDone: false,
        id: 1,
      },
      {
        task: '学习Vue',
        isDone: true,
        id: 2,
      },
    ],
  };
  handleById = (id) => {
    const list = [...this.state.list];
    console.log(id);
    const index = list.findIndex((item) => item.id === id);
    console.log(index);
    list.splice(index, 1);

    this.setState({ list });
  };
  // 3.1 定义方法修改list，接收id，通过id更新一条数据
  handleUpdateList = (id) => {
    console.log(id);
    // 在react中只能通过setState修改list，state是只读的，通过新值覆盖旧值
    const newList = this.state.list.map((item) => {
      return {
        ...item,
        isDone: id === item.id ? !item.isDone : item.isDone,
      };
    });

    // 3.4 setState修改list
    this.setState({
      list: newList,
    });
  };
  handleAdd = (val) => {
    // 7.5 新增数据到list中
    let newList = this.state.list.slice();
    newList.push({ task: val, isDone: false, id: Date.now() });
    this.setState({ list: newList });
  };
  render() {
    const { list } = this.state;
    const isAll = list.length ? list.every((item) => item.isDone) : false;
    return (
      <section className="todoapp">
        {/* 头部 */}
        <Header handleAdd={this.handleAdd} />
        {/* 主体 */}
        <Main
          list={this.state.list}
          handleUpdateList={this.handleUpdateList}
          handleById={this.handleById}
          isAll={isAll}
        ></Main>
        {/* 底部 */}
        <Footer />
      </section>
    );
  }
}

class Header extends Component {
  state = {
    task: '',
  };
  handleChange = (e) => {
    // console.log(e);
    this.setState({ task: e.target.value });
  };
  handleAdd = (e) => {
    if (e.code === 'Enter') {
      this.props.handleAdd(e.target.value);
    }
  };
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="需要做什么"
          autoFocus
          value={this.state.task}
          onChange={this.handleChange}
          onKeyDown={this.handleAdd}
        />
      </header>
    );
  }
}
class Main extends Component {
  state = {};
  render() {
    const { list, handleUpdateList, handleById, isAll } = this.props;
    // console.log(list);
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={isAll}
        />
        <label htmlFor="toggle-all">全选</label>
        <ul className="todo-list">
          {list.map((item) => (
            <li className={item.isDone ? 'completed' : ''} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={() => handleUpdateList(item.id)}
                />
                <label>{item.task}</label>
                <button
                  className="destroy"
                  onClick={() => handleById(item.id)}
                ></button>
              </div>
            </li>
          ))}
          {/* <li className="completed">
            <div className="view">
              <input className="toggle" type="checkbox" />
              <label>吃饭</label>
              <button className="destroy"></button>
            </div>
          </li>
          <li className="">
            <div className="view">
              <input className="toggle" type="checkbox" />
              <label>睡觉</label>
              <button className="destroy"></button>
            </div>
          </li> */}
        </ul>
      </section>
    );
  }
}

class Footer extends Component {
  state = {};
  render() {
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>1</strong> 剩余
        </span>
        <ul className="filters">
          <li>
            <a className="all selected" href="#/">
              全部
            </a>
          </li>
          <li>
            <a className="active" href="#/active">
              未完成
            </a>
          </li>
          <li>
            <a className="completed" href="#/completed">
              已完成
            </a>
          </li>
        </ul>
        <button className="clear-completed">清除已完成</button>
      </footer>
    );
  }
}
